<template>   
  <div class="container">    
    <div class="navbar">       
      <ul>       
        <li><router-link to="/home">首页</router-link></li>       
        <li><router-link to="/about">AI问答</router-link></li>       
        <li><router-link to="/search">知识检索</router-link></li>       
        <li><router-link to="/jiansuo">药物检索</router-link></li>       
        <li><router-link to="/" class="logout-button">退出登录</router-link></li>       
      </ul>     
    </div>     
    <div class="content"> 
      <div class="drug-detail">       
        <h2>{{ drug.name }}</h2>       
        <p><strong>功效：</strong>{{ drug.effect }}</p>       
        <router-link to="/jiansuo">返回药物列表</router-link>     
      </div>   
    </div>
  </div>   
</template>      

<script>   
import axios from 'axios';      

export default {
  name: 'DrugDetail',
  props: ['id'],
  data() {
    return {
      drug: {}
    };
  },
  async mounted() {
    await this.fetchDrugDetail();
  },
  methods: {
    async fetchDrugDetail() {
      try {
        const response = await axios.get(`/drug_detail/${this.id}/`);
        this.drug = response.data.drug;
      } catch (error) {
        console.error('获取药物详情失败:', error);
      }
    }
  }
};
</script>      

<style scoped>    
.container {
  background-color: rgba(218, 235, 251, 0.497);
  height: 100vh; /* 使用视口高度 */
  width: 100%;
  background-color: rgb(230, 241, 250);
  display: flex;
  flex-direction: column;
} 

.navbar {
  position: fixed;
  top: 0;
  left: -10px;
  width: 100vw;
  height: 80px;
  background-color: rgba(218, 235, 251, 0.497);
  z-index: 999;
} 

.navbar ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
} 

.navbar ul li {
  position: relative;
  padding-left: 50px;
  padding-top: 5px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
} 

.navbar a {
  text-decoration: none;
  color: black;
  padding: 8px 16px;
} 

.navbar a:visited {
  color: black;
} 

.navbar a:hover {
  background-color: rgba(240, 248, 255, 0.599);
} 

.navbar a:active, .navbar a:focus {
  color: black;
} 

.navbar ul li .logout-button {
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  transition: background-color 0.3s;
  position: relative;
  background-color: #3967ff;
  cursor: pointer;
  border: none;
} 

.navbar ul li .logout-button:hover {
  background-color: #0056b3;
} 

/* 让内容区域居中 */
.content {
  flex: 1;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  padding-top: 10px; /* 避免被固定导航栏遮挡 */
} 

.drug-detail {
  width: 500px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} 

.drug-detail h2 {
  color: #3967ff;
} 

.drug-detail p {
  font-size: 16px;
  color: #666;
} 

a {
  color: #3967ff;
  text-decoration: none;
}
</style>
